<!--
 * @Author: your name
 * @Date: 2021-10-23 13:44:21
 * @LastEditTime: 2021-12-30 17:26:22
 * @LastEditors: your name
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \郑州三看\AdminUI\src\components\video\index.vue
-->
<template>
  <div class="video">
    <web-video
      v-if="src"
      :video-url="src"
      :live="true"
      :auto-play="autoPlay"
      :alt="alt"
      :muted="true"
      :hasAudio="false"
    />
  </div>
</template>

<script lang="ts">
  import { defineComponent, watch, ref } from 'vue';
  import { getVideo } from '@/api/ap-patrol/alarm';
  // import Axios from 'axios';

  import webVideo from './h265Video.vue';

  // import { getToken } from '@/utils/auth';

  // const windowInstance: any = window;

  export default defineComponent({
    components: { webVideo },
    props: {
      // 视屏流地址
      VideoUrl: {
        type: String,
        defualt: '',
      },
      // 视屏上方名称
      videoTitle: {
        type: String,
        default: '',
      },
      // 自动播放
      autoPlay: {
        type: Boolean,
        default: true,
      },
      // 视屏无法播放显示文字
      alt: {
        type: String,
        default: '无信号',
      },
    },
    setup(props) {
      const { VideoUrl, autoPlay, alt, videoTitle } = props;
      const src = ref('');
      Init();

      function Init() {
        if (!VideoUrl) {
          return;
        }
        src.value = VideoUrl;
        // const axios = Axios.create({
        //   // axios中请求配置有baseURL选项，表示请求URL公共部分
        //   baseURL: windowInstance.config.base_url,
        //   // 超时
        //   timeout: 10000,

        //   headers: {
        //     Authorization: getToken(),
        //   },
        // });

        // axios
        //   .get(VideoUrl)
        //   .then((res) => {
        //     src.value = res.data.data.ws;
        //   })
        //   .catch((err) => {
        //     src.value = VideoUrl;
        //   });
      }
      // 暂停
      function pause() {
        src.value = '';
      }
      // 播放
      function play() {
        Init();
      }

      watch(
        () => props.VideoUrl,
        (n) => {
          Init();
        },
      );

      return {
        src,
        autoPlay,
        alt,
        videoTitle,
        pause,
        play,
      };
    },
  });
</script>

<style lang="scss" scoped>
  .video {
    width: 100%;
    height: 100%;
  }

  ::v-deep .player-wrapper {
    width: 100%;
    height: 100%;

    // .video-wrapper {
    //   padding: 0 !important;
    //   height: 100%;
    // }
  }
</style>
